import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/remind/picker/model/date_mode.dart';
import 'package:share_fit/app/controllers/device/remind/picker/pickers.dart';
import 'package:share_fit/app/controllers/device/remind/picker/style/picker_style.dart';
import 'package:share_fit/app/controllers/space/train/train_logic.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

class TrainPage extends StatelessWidget {

  final logic = Get.put(TrainLogic());
  final state = Get.find<TrainLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Color(0xFFF5F9FB),
      appBar: AppBar(
        // backgroundColor: Color(0xFFF5F9FB),
        title: Text(LocaleKeys.train_time.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
        // leading: IconButton(
        //   padding: EdgeInsets.only(left: 15,),
        //   icon: Image.asset("assets/images/space/icon_appbar_arrow_back.png"),
        //   onPressed: () { Get.back(); },
        //   // child: Image.asset("images/icon_appbar_arrow_back.png"),
        // ),
        // leadingWidth: 25,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.only(left: 42.w, top: 134.h, right: 42.w),
        child: Container(
          width: 1.sw,
          child: Column(
            children: [
              Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 76.w,
                      height: 76.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        color: Color(0xFFFE6631),
                      ),
                      child: Text('1', style: TextStyle(color: Colors.white, fontSize: 48.sp),),
                    ),
                    Container(
                      width: 214.w,
                      height: 12.h,
                      color: Colors.white,
                    ),
                    Container(
                      width: 76.w,
                      height: 76.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        color: Color(0xFFFFFFFF),
                      ),
                      child: Text('2', style: TextStyle(color: Colors.black, fontSize: 48.sp),),
                    ),
                    Container(
                      width: 214.w,
                      height: 12.h,
                      color: Colors.white,
                    ),
                    Container(
                      width: 76.w,
                      height: 76.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        color: Color(0xFFFFFFFF),
                      ),
                      child: Text('3', style: TextStyle(color: Colors.black, fontSize: 48.sp),),
                    )
                  ],
                ),
              ),
              SizedBox(height: 82.h,),
              Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white
                ),
                child: Column(
                  children: [
                    Container(
                      padding: EdgeInsets.only(left: 60.w, right: 36.w),
                      margin: EdgeInsets.only(top:72.h, bottom: 64.h),
                      child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(LocaleKeys.train_remind.ts, style: TextStyle(fontSize: 42.sp, color: ColorConst.btnFontColor),),
                            GetBuilder<TrainLogic>(
                                id: 'train_remind_switch',
                                builder: (_){
                                  return Transform.scale(
                                    scale: 0.7,
                                    child: CupertinoSwitch(value: state.switchRemind,
                                      activeColor: ColorConst.activeColor,
                                      onChanged: (value){
                                        logic.setRemind(value);
                                      }),);
                                }),
                            // CupertinoSwitch(value: true,
                            //     activeColor: Color(0xFFFC673C),
                            //     onChanged: (value){})
                          ]
                      ),
                    ),
                    Divider(height: 1,),
                    GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: ()=>showPicker(context),
                      child: Container(
                        padding: EdgeInsets.only(left: 60.w, right: 36.w),
                        margin: EdgeInsets.only(top:60.h, bottom: 60.h),
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(LocaleKeys.train_time.ts, style: TextStyle(fontSize: 42.sp, color: ColorConst.btnFontColor),),
                              Container(child: Row(
                                children: [
                                  GetBuilder<TrainLogic>(
                                      id: 'train_time',
                                      builder: (_){
                                        return Text(state.trainTime, style: TextStyle(fontSize: 36.sp, color: Color(0xFF000013)),);
                                      }),
                                  // Text('15:30', style: TextStyle(fontSize: 36.sp, color: Color(0xFF000013)),),
                                  Icon(Icons.arrow_forward_ios, size: 16,),
                                ],
                              ))

                            ]
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                width: 1.sw,
                margin: EdgeInsets.only(top: 60.h, bottom: 40.h),
                child: Text(LocaleKeys.train_table.ts, style: TextStyle(fontSize: 54.sp, color: Color(0xFF898C8F)),),
              ),
              Container(
                width: 1.sw,
                alignment: Alignment.centerLeft,
                margin: EdgeInsets.only(top: 60.h, bottom: 62.h),
                padding: EdgeInsets.only(top: 62.h, bottom: 62.h),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding:EdgeInsets.only(left: 62.w),
                      child:Text('2022-1', style: TextStyle(fontSize: 42.sp, color: Color(0xFF898C8F)),),
                    ),
                    SizedBox(height: 58.h,),
                    Container(
                      width: 1.sw,
                      padding:EdgeInsets.only(left: 42.w, right: 42.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: _dateTable(),
                      ),
                    )
                  ],
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 502.w,
                    height: 604.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.white
                    ),
                    child: Column(
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: 58.h, bottom: 56.h),
                          alignment: Alignment.center,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(LocaleKeys.train_step.ts, style: TextStyle(fontSize: 54.sp, color: Color(0xFF898C8F)),),
                              Text('19600', style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor))
                            ],
                          ),
                        ),
                        Image(
                            width: 296.w,
                            height: 296.w,
                            image: AssetImage('assets/images/space/icon_train_01.png')),
                        Container(
                          margin: EdgeInsets.only(top: 40.h),
                          child: Text(LocaleKeys.train_completion.ts, style: TextStyle(fontSize: 42.sp, color: Color(0xFF898C8F)),),
                        )
                      ],
                    ),
                  ),
                  Container(
                    width: 502.w,
                    height: 604.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white
                    ),
                    child: Column(
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: 58.h, bottom: 56.h),
                          alignment: Alignment.center,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Expanded(child: RichText(text: TextSpan(
                                children: [
                                  TextSpan(text: LocaleKeys.train_calorie.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.secondaryFontColor),),
                                  TextSpan(text: '9600', style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor))
                                ]
                              ),)),
                            ],
                          ),
                        ),
                        Image(
                            width: 296.w,
                            height: 296.w,
                            image: AssetImage('assets/images/space/icon_train_02.png')),
                        Container(
                          margin: EdgeInsets.only(top: 40.h),
                          child: Text(LocaleKeys.train_completion.ts, style: TextStyle(fontSize: 42.sp, color: Color(0xFF898C8F)),),
                        )
                      ],
                    ),
                  )
                ],
              ),
              SizedBox(height: 40.h,)
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> _dateTable() {
    List<Widget> item = [];
    dates.forEach((element) {
      Widget wiget = Container(
        child: Column(
          children: [
            Text(element, style: TextStyle(color: ColorConst.btnFontColor, fontSize: 42.sp),),
            Container(height: 20.h,),
            Container(
              width: 40.w,
              height: 10.h,
              color: Color(0xFFF2AA3D),
            )
          ],
        ),
      );

      item.add(wiget);
    });
    return item;
  }

  void showPicker(BuildContext context) {
    var pickerStyle = PickerStyle(
      cancelButton: _bottomButton(LocaleKeys.person_choice_cancel.ts),
      commitButton: _bottomButton(LocaleKeys.person_choice_submit.ts),
      title: Center(child: Text(LocaleKeys.train_time.ts, style: TextStyle(color: ColorConst.btnFontColor, fontSize: 54.sp),))
    );
    Pickers.showDatePicker(context,
        mode: DateMode.HM,
        pickerStyle: pickerStyle,
        onConfirm: (p){
          logic.setTrainTime('${p.hour}:${p.minute}');
          Navigator.pop(context);
        });
  }

  Widget _bottomButton(String text) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.only(left: 12, right: 22),
      child: Text(text,
          style: TextStyle(color: ColorConst.btnFontColor, fontSize: 42.sp)),
    );
  }

  List<String> dates = [
    LocaleKeys.weekly_sunday.ts,
    LocaleKeys.weekly_monday.ts,
    LocaleKeys.weekly_tuesday.ts,
    LocaleKeys.weekly_wednesday.ts,
    LocaleKeys.weekly_thursday.ts,
    LocaleKeys.weekly_friday.ts,
    LocaleKeys.weekly_saturday.ts,
  ];

}